<template>
	<view>
		<u-navbar @leftClick="ToAddPlan" left-text="新增计划" title="训练计划" bgColor="#1296db"></u-navbar>

		<view style="margin: 100px auto 0;">
			<u-search placeholder="请输入关键字" v-model="searchText" @clear="clearText" @search="search" @custom="search"
				:animation="true">
			</u-search>

			<u-swipe-action>
				<u-swipe-action-item :options="item.options" v-for="(item,index) in planList" :key="item.id"
					@click="handleClick" :name="index">

					<text></text>
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="swipe-action__content__text"><rich-text
									:nodes="'计划标题：'+item.title"></rich-text></view>
							<view class="swipe-action__content__text"><rich-text
									:nodes="'计划内容：'+item.content"></rich-text></view>
							<view class="swipe-action__content__text">训练日期：{{item.doDate}}</view>
							<view class="swipe-action__content__text">完成情况：{{item.status===0?'未完成':'已完成'}}</u-tag>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				planList: [],
				userInfo: {},
				completedOptions: [{
						text: '已完成',
						style: {
							backgroundColor: '#5ac725',
						},
					},
					{
						text: '修改',
						style: {
							backgroundColor: '#2b85e4',
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c',
						},
					},
				],
				options: [{
						text: '未完成',
						style: {
							backgroundColor: '#f9ae3d',
						},
					}, {
						text: '修改',
						style: {
							backgroundColor: '#2b85e4',
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c',
						},
					},
				]

			};
		},
		onShow() {
			this.getAllPlan()
		},
		onLoad(options) {
			this.userInfo = uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.userInfo = res.data
				}
			})
			this.getAllPlan()
		},
		methods: {
			loadOptions(planList) {
				if (!Array.isArray(planList)) {
					return
				}
				return planList.map((val, idx) => {
					if (planList[idx].status === 1) {
						planList[idx].options = this.completedOptions
					} else {
						planList[idx].options = this.options
					}
				})
			},
			async search() {
				let {
					data: res
				} = await uni.$http.get('/user/plan/search', {
					'searchText': this.searchText,
					'userId': this.userInfo.id
				})
				if (res.code === 20000) {
					this.planList = res.data
					this.loadOptions(this.planList)
				} else {
					uni.$showMsg(res.msg)
				}
			},
			clearText() {
				this.getAllPlan()
			},
			ToAddPlan() {
				uni.navigateTo({
					url: '/pages/plan/plan'
				})
			},
			async getAllPlan() {
				let {
					data: res
				} = await uni.$http.get('/user/plan/user/' + this.userInfo.id)
				if (res.code === 20000) {
					this.planList = res.data
					// this.planList.map((val, idx) => {
					// 	if (this.planList[idx].status === 1) {
					// 		this.planList[idx].options = this.completedOptions
					// 	} else {
					// 		this.planList[idx].options = this.options
					// 	}
					// })
					this.loadOptions(this.planList)
				} else {
					uni.$showMsg(res.msg)
				}
			},
			async changeStatus(id) {
				let {
					data: res
				} = await uni.$http.put('/user/plan/' + id + '/1')
				return res
			},
			handleClick(options) {
				console.log(options);
				// 已完成按钮
				if (options.index === 0 && this.planList[parseInt(options.name)].status === 1) {
					uni.$showMsg('你已完成这个计划了，真棒捏！')
					return
				}

				// 未完成按钮
				if (options.index === 0 && this.planList[parseInt(options.name)].status === 0) {
					uni.showModal({
						title: '计划完成',
						content: '您确定已完成这个计划了吗？',
						success: (action) => {
							if (action.confirm) {
								this.changeStatus(this.planList[parseInt(options.name)].id).then(res => {
									if (res.code === 20000) {
										this.getAllPlan()
										uni.$showMsg('恭喜你完成这个计划，真棒捏！')
									} else {
										uni.$showMsg(res.msg)
									}
								})
							} else if (action.cancel) {
								uni.$showMsg('虽然你取消了，但是你可以做到的，加油鸭！')
							}
						}
					})
					return
				}

				// 修改按钮
				if (options.index === 1) {
					uni.navigateTo({
						url: '/pages/plan/plan?id=' + this.planList[parseInt(options.name)].id
					})
				}
				// 删除按钮
				if (options.index === 2) {
					uni.showModal({
						title: '删除计划',
						content: '您确定要删除这个计划吗？',
						success: (action) => {
							if (action.confirm) {
								this.delete(this.planList[parseInt(options.name)].id).then(res => {
									if (res.code === 20000) {
										this.getAllPlan()
										uni.$showMsg('删除成功！真遗憾捏，训练计划变少了！')
									} else {
										uni.$showMsg(res.msg)
									}
								})
							} else if (action.cancel) {
								uni.$showMsg('成功取消删除，又可以多多锻炼辣！')
							}
						}
					})
					return
				}
			},
			async delete(id) {
				let {
					data: res
				} = await uni.$http.delete('/user/plan/' + id)
				return res
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>